<template>
    <div class="an_jian_wp">
        <div class="tab_title">
            <span>键盘精灵</span>
            <i class="iconfonMy icon-guanbi" @click="closeWin"></i>
        </div>
        <div class="body">
            <div class="search">
                <input ref="refInput" type="text" v-model="inputVal" @input="changeInput">
            </div>
            <div class="list">
                <div class="list_li" v-for="item in list" :key="item.heyue_bh" @click="selectClick(item)">
                    <span>{{ item.heyue_name }}</span>
                    <span>{{ item.heyue_bh }}</span>
                    <span>{{ item.shichang_name }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const { ref, onMounted } = require('vue')
const { ipcRenderer } = require('electron');
import { mainStore } from '@/store/index.js';

const storeMain = mainStore()


const inputVal = ref('')
const list = ref([])
const refInput = ref(null)

onMounted(() => {
    if (refInput.value) refInput.value.focus()
    ipcRenderer.on('anjian-onload', (e, v) => {
        if (v) {
            inputVal.value = v
        }
        if (refInput.value) refInput.value.focus()
    })
})

function changeInput(v) {
    let val = v.target.value
    if (isFirstCharChinese(val)) {
        list.value = storeMain.heyueinfo.filter(item => item.heyue_name.toLowerCase().includes(val.toLowerCase()));
        // list.value = Object.values(storeMain.classHeyue[storeMain.classHeyueIndex]).filter(item => item.heyue_name.includes(val));
        return
    }
    list.value = storeMain.heyueinfo.filter(item => item.heyue_bh.toLowerCase().includes(val.toLowerCase()));
    // list.value = Object.values(storeMain.classHeyue[storeMain.classHeyueIndex]).filter(item => item.heyue_bh.includes(val));

}
function selectClick(item) {
    ipcRenderer.send("right_click_msg", {
        type: "切换合约",
        orderInfo: JSON.stringify(item)
    });
    inputVal.value = ''
    ipcRenderer.send('close-anjian')
}

function isFirstCharChinese(str) {
    if (!str) return false; // 如果字符串为空，返回 false
    const firstChar = str.charAt(0); // 获取第一个字符
    const regex = /^[\u4e00-\u9fff]/; // 匹配中文字符的 Unicode 范围
    return regex.test(firstChar); // 判断第一个字符是否是中文
}

function closeWin() {
    inputVal.value = ''
    ipcRenderer.send('close-anjian')
}


</script>

<style scoped lang="less">
.an_jian_wp {
    background-color: #fff;
    color: #000;
    height: 340px;
    width: 275px;

    .tab_title {
        background-color: #307dc1;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 25px;
        padding-left: 5px;
        -webkit-app-region: drag;

        i {
            -webkit-app-region: no-drag;
            width: 29px;
            height: 25px;
            text-align: center;
        }

        i:hover {
            background-color: #e61123;
            color: #fff;
        }
    }

    .body {
        padding: 5px;
        height: calc(100% - 25px);

        .search {
            input {
                width: 100%;
                height: 25px;
                font-size: 12px;
                padding: 0 5px;
            }
        }

        .list {
            overflow-y: scroll;
            height: calc(100% - 30px);

        }

        .list_li {
            display: flex;
            align-items: center;
            padding-top: 5px;
            border-bottom: 1px solid #cacdd1;
            line-height: 20px;

            span {
                flex: 1;
                overflow: hidden;
                white-space: nowrap;
                direction: rtl;
                text-align: left;
            }

            span:nth-of-type(2) {
                text-align: center;
            }

            span:last-of-type {
                text-align: right;
            }
        }

        .list_li:hover {
            background-color: #ebf1fb;
        }
    }
}
</style>
